<template>
    <div class="roles">
        <el-row>
            <el-col :span="24">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>权限管理</el-breadcrumb-item>
                    <el-breadcrumb-item>角色列表</el-breadcrumb-item>
                    </el-breadcrumb>
            </el-col>
        </el-row>
        <el-button type="primary" plain>添加角色</el-button>
         <el-table
            class="magin"
            :data="rolesList"
            style="width: 100%">
            <el-table-column type="expand">
            <template slot-scope="scope">
               <el-row v-for="firstchildren in scope.row.children" :key="firstchildren.id">
                 <el-col :span="4">
                     <el-tag closable @close="deleteRoles(scope.row,firstchildren.id)">{{firstchildren.authName}}</el-tag>
                     <i class="el-icon-arrow-right" v-if="firstchildren.length!==0"></i>
                 </el-col>
                <el-col :span="20">
                    <el-row v-for="secondchildren in firstchildren.children" :key="secondchildren.id">
                      <el-col :span="4">
                          <el-tag closable type="success" @close="deleteRoles(scope.row,secondchildren.id)">{{secondchildren.authName}}</el-tag>
                          <i class="el-icon-arrow-right" v-if="secondchildren.length!==0"></i>
                      </el-col>
                       <el-col :span="20">
                           <el-tag type="waring" closable v-for="thirdchildren in secondchildren.children" :key="thirdchildren.id" @close="deleteRoles(scope.row,thirdchildren.id)">
                               {{thirdchildren.authName}}
                           </el-tag>
                           
                       </el-col>
                    </el-row>
                </el-col>
             </el-row>
             <el-row v-if="scope.row.children.length===0">
               <el-col :span="24">
                   该用户没有分配权限
               </el-col>
             </el-row>
            </template>
            </el-table-column>
            <el-table-column
            width="120px"
            label="角色名称"
            prop="roleName">
            </el-table-column>
            <el-table-column
            width="160px"
            label="描述"
            prop="roleDesc">
            </el-table-column>
            <el-table-column
            label="操作">
            <template slot-scope="scope">
                    <el-button
                    size="mini"
                    type="primary" plain icon="el-icon-edit"></el-button>
                     <el-button
                    size="mini"
                    type="danger" plain icon="el-icon-delete"></el-button>
                     <el-button
                    size="mini"
                    type="warning" plain icon="el-icon-check" @click="showmsg(scope.row)"></el-button>
                </template>
            </el-table-column>
        </el-table>

                <el-dialog title="授权角色" :visible.sync="dialogFormVisible">
                <div class="treeBox">
                     <el-tree
                     ref="tree"
                    :data="data"
                    show-checkbox
                    node-key="id"
                    :default-expand-all="true"
                    :default-checked-keys="selectroles"
                    :props="defaultProps">
                    </el-tree>
                </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitRoles">确 定</el-button>
            </div>
            </el-dialog>


    </div>
</template>
<script>
import {fenpeiusesList,getdeleteRoles,getrightList,getuserRoles} from '@/api'
export default {
    data() {
        return {
            rolesList:[],
            dialogFormVisible:false,
            data: [],
        defaultProps: {
          children: 'children',
          label: 'authName'
        },
         selectroles:[],
         currentRoles:{}
      }
     
        
    },
    created() {
        this.initList()
    },
    methods: {
        initList(){
            fenpeiusesList().then(res=>{
            // console.log(res)
            if(res.meta.status==200){
                this.rolesList=res.data
            }
        })
        },
        deleteRoles(row,rightId){
            // console.log(roleId,rightId)
            getdeleteRoles({roleId:row.id,rightId:rightId}).then(res=>{
                if(res.meta.status==200){
                   row.children=res.data
                }else{
                    this.$message({
                        type:'waring',
                        message:"删除权限失败"
                    })
                }
            })
        },
        showmsg(row){
           
            this.dialogFormVisible=true
            this.currentRoles=row
            getrightList({type:'tree'}).then(res=>{
                console.log(res.data)
                if(res.meta.status==200){
                    this.data=res.data
                }
            })
             this.selectroles.length=0
            this.currentRoles.children.forEach(first=>{
                if(first.children&&first.children.length!==0){
                    first.children.forEach(second=>{
                        if(second.children&&second.children.length!==0){
                            second.children.forEach(third=>{
                                this.selectroles.push(third.id)
                            })
                        }
                    })
                }
            })
        },
        submitRoles(){
            let rids=this.$refs.tree.getCheckedKeys().join(',')
            getuserRoles(this.currentRoles.id,{rids:rids}).then(res=>{
                // console.log(res)
                if(res.meta.status==200){
                    this.$message({
                        type:'success',
                        message:res.meta.msg
                    })
                }
                this.dialogFormVisible=false
                 this.initList()
            })
        }

    },
}
</script>
<style lang="scss" scoped>
.roles{
    .magin{
        margin-top: 20px;
    }
    .el-tag{
        margin-top: 5px;
        margin-left: 5px;
    }
    .treeBox{
        height: 300px;
        overflow: auto
    }
}
    
</style>
